<template>
  <div>
    <el-select v-model="dizhi" placeholder="请选择">
      <el-option
        v-for="item in locationdata"
        :key="item.addressid"
        :label="item.addressname"
        :value="item.addressid"
      >
      </el-option>
    </el-select>
    <el-row>
      <el-button type="primary" @click="shaixuan">筛选按钮</el-button>
      <el-button type="info">重置按钮</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="jrid" label="信息ID"></el-table-column>
      <el-table-column
        prop="jraddressesid"
        label="对应的地址ID"
      ></el-table-column>
      <!-- <el-table-column prop="tcoin" label="头像图片"> </el-table-column> -->
      <el-table-column prop="jrname" label="姓名"> </el-table-column>
      <el-table-column prop="jrlevel" label="等级ID"> </el-table-column>
      <el-table-column prop="hitnumber" label="hitnumber"> </el-table-column>
      <el-table-column prop="jrtel" label="电话号码"> </el-table-column>
      <!-- <el-table-column prop="weixin" label="微信二维码图片"> </el-table-column> -->
      <el-table-column prop="levelname" label="等级名称"> </el-table-column>
      <el-table-column prop="addressname" label="地址名称"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.row)"
            type="text"
            size="small"
          >
            移除
          </el-button>
          <el-button
            @click.native.prevent="xiugaiRow(scope.row)"
            type="text"
            size="small"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
  <script>
import { getMessage } from "@/api/message";
import { delMessage } from "@/api/message";
import { getLocation } from "@/api/location";
import {shaixuanMessage} from "@/api/message"
export default {
  data() {
    return {
      tableData: [],
      options: [],
      locationdata: [],
      dizhi:''
    };
  },
  methods: {
    getMessagelist() {
      getMessage().then((res) => {
        this.tableData = res.data;
      });
    },
    deleteRow(row) {
      delMessage({
        id: row.jrid,
      })
        .then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
        .catch((err) => {
          this.$message({
            message: "删除失败",
            type: "warning",
          });
        });
    },
    //修改部分要在添加页面中实现，因此，这里给“修改”添加的点击事件，只需跳转到addmessage页面即可（也不需要导包）
    xiugaiRow(row) {
      this.$router.push({
        path: "/message/addmessage",
        query: {
          //带参数的跳转，接口的id即为row中的jrid，将其传到addmessage页面即可（但是，通过该传参方式，参数在网址中，需要在addmessage的created生命周期里接收）
          id: row.jrid,
        },
      });
    },
    // 获取地址信息
    getLocationList() {
      getLocation().then((res) => {
        this.locationdata = res.data;
      });
    },





    //筛选的基本实现：(不会显示你的地址名称和等级名称，下方的筛选用于添加这个功能)
    // shaixuan(){
    //   shaixuanMessage({
    //     searchid:this.dizhi        传参赋值（不会显示筛选出的页面）
    //   }).then((res)=>{
    //       this.tableData=res.data  展示出筛选的页面（同getLocation 和getLevel）
    //   }).catch((err)=>{
    //     this.$message({            容错
    //         message: "筛选失败",
    //         type: "warning",
    //       });
    //   })
    // }
    //筛选
    shaixuan(){   //dizhi是id 所以不能直接用 需要利用地址id生成地址名字
      let dizhiming=''    //定义dizhiming 接收地址名的数据
      this.locationdata.forEach((val)=> {    //在你上方定义的数组中循环，如果数组中该项的地址id和用户输入的id相等 把这个addressname赋值给dizhiming
        if(val.addressid==this.dizhi){        
          dizhiming=val.addressname         //成功获取地址名
        }
      });
    
      shaixuanMessage({
        searchid:this.dizhi
      }).then((res)=>{
          let dataa=res.data
          this.tableData=dataa.map((val)=>{     //要把地址名和原本的tableData合并，所以用到map() 把上方的dizhiming赋给val的addressname 。。。。
            val.addressname=dizhiming
            val.levelname='NULL'
            return val
          })
      }).catch((err)=>{
        this.$message({
            message: "筛选失败",
            type: "warning",
          });
      })
    }
  },
  created() {
    this.getMessagelist();
    this.getLocationList();
  },
};
</script>
  
  <style>
</style>
  
  